<template>
  <div class="article-wrapper">
    <div style="width: 1200px; margin: 0 auto"></div>
    <div style="padding: 0 0 10px; width: 1200px; margin: 0 auto">
      <div class="article">
        <header class="title">
          <h1 style="font-size: 24px">{{ article.title }}</h1>
          <div class="meta">
            <span>{{ article.publish_date }}</span>
            <span>
              <span>{{ article.read_count }}</span>
              次阅读
            </span>
            <span>
              稿源 ：
              <span>{{ article.source }}</span>
            </span>
            <span>
              <a class="comment" href="https://www.baidu.com" target="_blank">
                <i class="comment-icon"></i>
                <span>{{ article.comment_count }}</span
                >条评论
              </a>
            </span>
          </div>
        </header>
        <div class="article-body">
          <div class="article-summary">
            <p v-html="article.summary"></p>
          </div>
          <div class="article-content" v-html="article.content"></div>
          <div class="vote-tag">
            <div class="author">责任编辑：{{ article.author }}</div>
            <h3>对文章打分</h3>
            <div class="vote-wrapper">
              <h4>{{ article.title }}</h4>
              <div class="vote-bar-wrapper">
                <div class="like-btn"></div>
                <div class="dislike-btn"></div>
                <div class="vote-bar"></div>
              </div>
            </div>
          </div>
          <div class="clear"></div>
          <!--          评论-->
          <div class="comments">
            <div class="comment-header">
              <span>已有0条意见</span>
            </div>
            <el-divider />
            <div class="comment-wrapper">
              <!--评论框-->
              <el-input type="textarea"></el-input>
              <div>
                <el-button style="margin-top: 10px; margin-left: 10px"
                  >发送评论</el-button
                >
              </div>
            </div>
            <el-divider style="margin-bottom: 10px" />
          </div>
        </div>
      </div>
      <!--      侧边栏 -->
      <div class="home-side">
        <div class="relate">
          <h3 class="side-title">相关文章</h3>
          <div class="side-wrapper">
            <ul class="list-row">
              <li style="padding: 10px 0">
                <div class="story-small">
                  <div>
                    <a
                      href="https://www.baidu.com/"
                      target="_blank"
                      class="relate-image"
                    >
                    </a>
                    <h4 class="story-title">
                      <a
                        href="https://www.baidu.com"
                        style="color: #666; text-decoration: none"
                        >亚马逊《指环王》第一季拍摄正式杀青 片场照公布</a
                      >
                    </h4>
                  </div>
                </div>
              </li>
              <li style="padding: 10px 0">
                <div class="story-small">
                  <div>
                    <a
                      href="https://www.baidu.com/"
                      target="_blank"
                      class="relate-image"
                    >
                    </a>
                    <h4 class="story-title">
                      <a
                        href="https://www.baidu.com"
                        style="color: #666; text-decoration: none"
                        >亚马逊《指环王》第一季拍摄正式杀青 片场照公布</a
                      >
                    </h4>
                  </div>
                </div>
              </li>
              <li style="padding: 10px 0">
                <div class="story-small">
                  <div>
                    <a
                      href="https://www.baidu.com/"
                      target="_blank"
                      class="relate-image"
                    >
                    </a>
                    <h4 class="story-title">
                      <a
                        href="https://www.baidu.com"
                        style="color: #666; text-decoration: none"
                        >亚马逊《指环王》第一季拍摄正式杀青 片场照公布</a
                      >
                    </h4>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'detail',
  async created() {
      console.log(this.$route.params)
      await this.getArticleDetail(this.$route.params.id)
  },
  methods:{
    async getArticleDetail(id){
      let res = await this.$axios.$get(`/article/detail?id=${id}`)
      console.log(res)
      // this.article.id = res.data.article.id
      this.article.title = res.data.article.title
      this.article.summary = res.data.article.summary
      this.article.publish_date = res.data.article.create_time
      this.article.read_count = res.data.article.read_count
      this.article.source = res.data.article.source
      this.article.comment_count = res.data.article.comment_count
      this.article.author = res.data.article.author
      this.article.content = res.data.article.content
    }
  },
  data() {
    return {
      article: {
        title: '《雷神4》反派屠神者造型曝光 贝尔全身涂成灰色',
        publish_date: '2021-08-05 10:46',
        read_count: 192,
        source: '新浪科技',
        comment_count: 0,
        summary: `北京时间8月5日早间消息，据报道，今年秋季，美国民营太空公司SpaceX将会“发射”该公司史上第一批“全大众”乘员，让他们环绕地球飞行数日。
            <strong>
              有点不寻常的是，因为SpaceX已经和美国网络视频巨头奈飞（Netflix）签署了独家纪录片协议，因此地球上的网民将能够随时关注这些太空游客的动态。
            </strong>`,
        author: 'vivian',
        content: `制作内容
            奈飞将会为这一次飞行任务拍摄纪录片《倒计时：向太空的灵感4号飞行任务》（Countdown: Inspiration4 Mission to Space），一共有五集，其中9月6日，奈飞将播出前两集。
            本周二，奈飞表示，这是该公司历史上首次以“接近实时”的速度制作纪录片，报道一个重大事件。
            九月份，奈飞的一个视频拍摄小组将会全方位关注这批大众太空游客乘员（其中包括将驾驶载人飞船的亿万富翁乔雷德·伊萨克曼“Jared Isaacman”），记录他们从训练准备到发射升空的全过程。
            按照计划，奈飞将会在9月13日再次上线两集。9月15日，奈飞团队将会拍摄发射升空情况，并且在九月底播出“大结局”最后一集。
            据悉，这一次太空飞行还有另外一个使命，那就是为美国圣朱迪儿童研究医院筹款。
            通过这一次的纪录片计划，奈飞希望向人类传递一个信息，那就是太空旅游已经开始进入寻常百姓时代。奈飞为纪录片制作的一则海报中有这样的字样，“这个九月，我们都要去太空。”奈飞还将制作一些动画视频，向孩子们和父母介绍这一次飞行任务。
            在SpaceX、蓝色起源、维珍银河等公司努力下，太空旅游正在逐步普及。不过，除了发射公司之外，这些历史性的飞行也给媒体行业带来了一次巨大商机。
            热门题材
            SpaceX这一次的“灵感4”号任务以及视频直播，也将开启从太空中进行直播报道的一个新纪元。对于新兴的太空旅游市场来说，网络直播也显得十分成熟，如今消费者可以在任何时间、任何地点观看到视频直播，娱乐行业也把亿万富翁们享受零重力的时刻变成了重大媒体事件。
            美国行业分析师茱莉亚·亚历山大（Julia Alexander）对媒体表示，太空发射任务也将给视频网站在全世界带来新会员。
            这位分析师表示，网民存在观赏需求，另外和大手笔的好莱坞影视节目相比，太空视频节目的制作成本很低，这意味着未来人们将会看到更多的太空有关的真人秀等视频节目。

            在影视收视榜上，太空题材热度颇高。从2020年6月到2021年7月，太空题材的《Nova》在美国纪录片收视榜上名列第八。亚历山大介绍说，去年，太空题材纪录片《宇宙时空之旅:未知世界》(Cosmos: Possible Worlds)的点播量是普通科学自然纪录片的18倍。此外，视频网站的大数据还能够把喜欢太空内容的观众引导到特定作品。

            美国卡耐基梅隆大学的IT和市场营销教授迈克尔·史密斯（Michael Smith）表示，奈飞和视频网站在制作和推广细分市场内容上更有优势，他们能够把观众和内容进行精准匹配。

            商机捕捉

            SpaceX的竞争对手蓝色起源、维珍银河公司也敏锐捕捉到了发射任务的媒体商机，他们可以借此对下属品牌、附属公司以及太空旅游市场进行广告营销。他们也进行了内容制作投资，比如引入专业直播评论员、动态更新内容，以及发射任务直播。据悉，维珍银河甚至招募了短视频平台TikTok的一个大V，宣传该公司下一次飞行。

            7月20日，全球首富贝索斯乘坐蓝色起源公司飞船体验太空之旅，一起同行的还有全世界年龄最大的太空游客沃利·芬克以及最年轻太空游客——荷兰人奥利弗·达尔曼（Oliver Daemen）。这次飞行引发了网络关注，数以百万计网民蜂拥到了蓝色起源在YouTube的频道上。

            蓝色起源负责公关的副总裁琳达·米尔斯（Linda Mills）对媒体表示，公司希望通过网络直播和报道展示一次真正的“坐火箭旅行”，因为迄今为止人类只有不到600人进入太空，蓝色起源也希望对未来的太空游客们传达这种飞行的独特和美妙。

            亚马逊旗下拥有视频平台“Prime Video”，贝索斯这次飞行也是该平台第一次网络直播蓝色起源的火箭和飞船发射。

            在不久的将来，将有更多的太空真人秀内容上市。比如美国一家名为“太空英雄”的制作公司正在拍摄一个竞赛类真人秀，多位社会大众人士展开训练和对决，优胜者将获得前往国际空间站一次极其昂贵的飞行机会。

            和奈飞一样，太空英雄公司也表示，他们要通过史上第一个太空真人秀节目，向普通大众打开太空的大门。另外，今年四月份，该公司还和美国宇航局签署了一个外包合同。

            历史关注

            需要指出的是，在网络视频时代之前，太空发射就已经成为轰动性的媒体事件。在美国太空计划的早期，美国宇航局就会对重大飞行任务进行现场直播，这些探索任务也会成为电视新闻头条。

            在“阿波罗11”登月任务期间，共有6亿人观看了直播，目睹美国宇航员阿姆斯特朗史上首次把脚踩在月球表面。在“挑战者号”航天飞机1986年爆炸后，美国电视台直播太空发射的热情有所下降，不过今天，一批民营太空公司准备让太空发射再一次成为人类可以实时观看的媒体事件。

            当然，围绕着太空旅游，目前还存在一些争议。比如太空旅游被认为是超级富豪的游戏，对环保不利，对于太空科学研究没有帮助。而有关太空旅游的直播或者视频节目，可能会让观众暂时忘掉这些争议。

            上述分析师亚历山大表示，贝索斯完成飞行任务后，舆论也出现了对他的批评声，不过奈飞拍摄的SpaceX太空旅游纪录片，可能不会带来类似的负面舆论，因为SpaceX本身能够把这些飞行对外解释清楚，而奈飞只想传递这些信息，并且制作出最优秀的太空纪录片。`,
      },
    }
  },
}
</script>

<style scoped>
.article-wrapper {
  padding-top: 5px;
  background: url(https://www.cnbeta.com/images/top_bg.png) no-repeat fixed
    center top;
}
.article {
  width: 890px;
  line-height: 31px;
  float: left;
  overflow: hidden;
}
.title {
  background: rgba(255, 255, 255, 0.65);
  padding: 30px 40px 5px;
  display: block;
}
.meta {
  position: relative;
  font-size: 14px;
  color: #888;
  padding: 20px 0 0;
}
.meta > span {
  margin-right: 10px;
}
.comment {
  color: #ff4d4d;
  padding: 0 0 0 5px;
  text-decoration: none;
  cursor: pointer;
}
.comment-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(https://www.cnbeta.com/images/cb_v5_sprite.png) no-repeat -16px -329px;
  margin: 0 5px -4px 0;
}
.article-body {
  background: rgba(255, 255, 255, 0.65);
  padding: 5px 40px 10px;
  position: relative;
}
.article-summary {
  position: relative;
  border: 1px solid #eee;
  font-size: 16px;
  padding: 15px 20px 10px 31px;
  overflow: auto;
}
.article-content {
  padding: 10px 0;
  font-size: 16px;
}
.vote-tag {
  padding: 0 40px 5px;
  background: #f9f9f9;
}
.author {
  float: right;
  color: #7b91a4;
  font-size: 14px;
}
.vote-wrapper {
  background: #eee;
  padding: 5px 25px 10px;
  margin-bottom: 1px;
}
.vote-wrapper > h4 {
  text-align: center;
  padding: 0 0 5px;
  color: #333;
  font-size: 14px;
}
.vote-bar-wrapper {
  padding: 0 45px;
  position: relative;
}
.like-btn {
  left: 0;
  width: 40px;
  height: 30px;
  position: absolute;
  top: 0;
  background: url(https://www.cnbeta.com/images/cb_v5_sprite.png) no-repeat -112px -304px;
  cursor: pointer;
}
.dislike-btn {
  right: 0;
  width: 40px;
  height: 30px;
  position: absolute;
  top: 0;
  background: url(https://www.cnbeta.com/images/cb_v5_sprite.png) no-repeat -160px -304px;
  cursor: pointer;
}
.vote-bar {
  background: #e0e0e0;
  height: 30px;
  margin: 0 auto;
  overflow: hidden;
}
.clear::after {
  clear: both;
}
.comments {
  background: #f9f9f9;
  padding: 0 0 5px;
}
.comment-header {
  height: 46px;
  line-height: 46px;
}
.comment-header span {
  padding: 0 0 0 15px;
  font-size: 16px;
  font-weight: 700;
  position: relative;
}
.comment-wrapper {
  position: relative;
  clear: both;
  margin: 10px 10px 10px 10px;
}
.home-side {
  width: 300px;
  float: right;
}
.relate {
  padding: 0;
  margin-bottom: 10px;
  position: relative;
}
.side-title {
  background: #447eb9;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}
.side-wrapper {
  background: #fff;
  padding: 0 10px 0;
}
.list-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  list-style: none;
}
.story-small {
  min-height: 72px;
  padding-left: 88px;
  position: relative;
  word-break: break-all;
}
.relate-image {
  background-image: url(https://static.cnbetacdn.com/thumb/mini/article/2021/0804/5fe66b7132d4877.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  left: 0;
  padding-top: 72px;
  position: absolute;
  top: 0;
  width: 72px;
  color: #666;
  text-decoration: none;
}
.story-title {
  font-size: 14px !important;
  font-weight: 700;
  line-height: 18px !important;
}
</style>
